<template>
  <div id="app">
    <!-- 顶部导航栏 -->
    <div class="header">
      <div class="logo">淘宝</div>
      <div class="search-bar">
        <el-input placeholder="请输入搜索内容" suffix-icon="el-icon-search"></el-input>
        <el-button>搜索</el-button>
      </div>
      <div class="user-info">
        <el-dropdown @command="handleCommand">
          <div class="el-dropdown-link">
            <el-avatar :size="40" src="/avatar.jpg"></el-avatar>
            <span class="user-name">{{ userInfo.username }}</span>
            <i class="el-icon-arrow-down el-icon--right"></i>
          </div>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item command="profile">个人中心</el-dropdown-item>
            <el-dropdown-item command="orders">我的订单</el-dropdown-item>
            <el-dropdown-item command="favorites">我的收藏</el-dropdown-item>
            <el-dropdown-item command="logout">退出登录</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </div>
    </div>

    <!-- 主导航 -->
    <el-menu router mode="horizontal" background-color="#FF4400" text-color="#fff" active-text-color="#ffd04b">
      <el-menu-item index="/">首页</el-menu-item>
      <el-menu-item index="/category/1">女装</el-menu-item>
      <el-menu-item index="/category/2">男装</el-menu-item>
      <el-menu-item index="/category/3">鞋靴</el-menu-item>
      <el-menu-item index="/category/4">箱包</el-menu-item>
      <el-menu-item index="/category/5">数码</el-menu-item>
      <el-menu-item index="/category/6">家电</el-menu-item>
      <el-menu-item index="/category/7">美妆</el-menu-item>
      <el-menu-item index="/category/8">母婴</el-menu-item>
    </el-menu>

    <!-- 轮播图 -->
    <el-carousel style="border-radius: 10px" height="300px" indicator-position="inside">
      <el-carousel-item v-for="(item, index) in banners" :key="index">
        <img :src="item.imgUrl" alt="轮播图" class="carousel-img" />
      </el-carousel-item>
    </el-carousel>

    <!-- 商品分类导航 -->
    <div class="category-nav">
      <el-row :gutter="20">
        <el-col :span="3" v-for="(category, index) in categories" :key="index">
          <el-card shadow="hover">
            <img :src="category.icon" alt="分类图标" class="category-icon" />
            <div class="category-name">{{ category.name }}</div>
          </el-card>
        </el-col>
      </el-row>
    </div>

    <!-- 商品列表 -->
    <div class="product-list">
      <h2 class="section-title">热门商品</h2>
      <el-row :gutter="20">
        <el-col :span="6" v-for="(product, index) in products" :key="index">
          <el-card shadow="hover" class="product-card" style="margin-bottom: 20px">
            <img :src="product.image" alt="商品图片" class="product-image" />
            <div class="product-title">{{ product.title }}</div>
            <div class="product-price">¥{{ product.price.toFixed(2) }}</div>
            <div class="product-sales">已售 {{ product.sales }}件</div>
            <el-button type="primary">加入购物车</el-button>
          </el-card>
        </el-col>
      </el-row>
    </div>

    <!-- 页脚 -->
    <div class="footer">
      <p>© 2025 淘宝 版权所有</p>
      <p>消费者客服热线：400-800-8888</p>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    isGetMessage: Boolean,
  },

  data() {
    return {
      userInfo: {
        username: '',
      },
      banners: [
        { id: 1, imgUrl: '/banner1.jpg' },
        { id: 2, imgUrl: '/banner2.jpg' },
        { id: 2, imgUrl: '/banner3.png' },
      ],
      categories: [
        { id: 1, name: '女装', icon: '/girl1.webp' },
        { id: 2, name: '男装', icon: '/boy1.webp' },
        { id: 3, name: '鞋靴', icon: '/shoes1.jpg' },
        { id: 4, name: '箱包', icon: '/bag1.webp' },
        {
          id: 5,
          name: '数码',
          icon: '/camera.webp',
        },
        {
          id: 6,
          name: '家电',
          icon: 'xyj.webp',
        },
        {
          id: 7,
          name: '美妆',
          icon: '/beautiful.webp',
        },
        {
          id: 8,
          name: '母婴',
          icon: '/mother.webp',
        },
      ],
      products: [
        {
          id: 1,
          title: '2025夏季新款连衣裙',
          price: 199.99,
          sales: 2345,
          image: '/s1.jpg',
        },
        {
          id: 2,
          title: '男士纯棉休闲T恤',
          price: 89.99,
          sales: 4567,
          image: '/s2.jpg',
        },
        {
          id: 3,
          title: '时尚女鞋夏季凉鞋',
          price: 259.99,
          sales: 1234,
          image: '/s3.jpg',
        },
        {
          id: 4,
          title: '多功能智能手表',
          price: 899.99,
          sales: 876,
          image: '/s4.jpg',
        },
        {
          id: 5,
          title: '轻薄透气运动鞋',
          price: 349.99,
          sales: 3456,
          image: '/s5.jpg',
        },
        {
          id: 6,
          title: '高清大屏智能手机',
          price: 2999.99,
          sales: 567,
          image: '/s6.jpg',
        },
        {
          id: 7,
          title: '保湿补水护肤套装',
          price: 459.99,
          sales: 234,
          image: '/s7.jpg',
        },
        {
          id: 8,
          title: '婴儿纯棉连体衣套装',
          price: 129.99,
          sales: 987,
          image: '/s8.jpg',
        },
      ],
    }
  },

  watch: {
    // 监听是否接收到token消息，接收到的话立即获取用户信息
    isGetMessage(newVal, oldVal) {
      if (oldVal === false && newVal === true) {
        this.axios.get('/user-info').then((data) => {
          this.userInfo = data.data
        })
      }
    },
  },

  methods: {
    handleCommand(command) {
      if (command === 'logout') {
        this.axios.get('/logout').then(() => {
          this.$message.success('登出成功');
          localStorage.removeItem('token')
          this.userInfo = {}
          window.location.href = `http://localhost:8080/login?redirect_url=${window.location.href}`
        })
      }
    }
  }
}
</script>

<style scoped>
#app {
  width: 100%;
  overflow: hidden;
}

.el-dropdown-link {
  display: flex;
  align-items: center;
}

.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 20px;
  border-bottom: 1px solid #eee;
}

.logo {
  font-size: 24px;
  font-weight: bold;
  color: #ff4400;
}

.search-bar {
  display: flex;
  align-items: center;
  width: 500px;
}

.search-bar .el-input {
  flex: 1;
  margin-right: 10px;
}

.user-info {
  display: flex;
  align-items: center;
}

.user-name {
  margin: 0 10px;
}

.carousel-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.category-nav {
  padding: 20px 0;
}

.category-icon {
  width: 60px;
  height: 60px;
  margin: 0 auto 10px;
  display: block;
  border-radius: 50%;
}

.category-name {
  text-align: center;
  font-size: 14px;
}

.product-list {
  padding: 20px 0;
}

.section-title {
  font-size: 20px;
  font-weight: bold;
  margin-bottom: 20px;
  padding-left: 10px;
  border-left: 4px solid #ff4400;
}

.product-card {
  display: flex;
  flex-direction: column;
}

.product-image {
  width: 100%;
  height: 250px;
  object-fit: cover;
  margin-bottom: 10px;
}

.product-title {
  font-size: 16px;
  margin-bottom: 5px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.product-price {
  font-size: 18px;
  font-weight: bold;
  color: #ff4400;
  margin-bottom: 5px;
}

.product-sales {
  font-size: 14px;
  color: #999;
  margin-bottom: 10px;
}

.footer {
  text-align: center;
  padding: 20px 0;
  margin-top: 40px;
  border-top: 1px solid #eee;
  color: #666;
}
</style>